<template>
  <task-container @selectItemClick="onSelectItem" @setQuery="onSetQuery">
    <div class="c-box">
      <div class="personal-details">
        <div class="icon">
          <img src="~@/assets/ico/u18916.png" height="90" alt="" />
        </div>
        <div class="info">
          <div style="margin-bottom: 10px;">姓名：{{ infoObj.name }}</div>
          <div class="info-flex">
            <div>手机：{{ infoObj.phone }}</div>
            <div>运营商：{{ infoObj.operatorName }}</div>
            <div>
              归属地：{{
                Object.keys(infoObj).length > 0 && infoObj.placeOwnership
                  ? infoObj.placeOwnership
                  : null
              }}
            </div>
          </div>
        </div>
      </div>
      <a-tabs default-active-key="1" @change="handleChange" v-model="tabIndex">
        <a-button slot="tabBarExtraContent" :loading="btnLoading" @click="onUpdate" v-if="isOperation"> 更新数据 </a-button>
        <a-tab-pane key="1" tab="虚拟身份">
          <z-table
            ref="table"
            rowKey="id"
            :showColSettings="false"
            :hideColSettings="['action']"
            :showAlert="false"
            :showSelection="false"
            :loading="loading1"
            :columns="columns1"
            :dataSource="pageData1"
            @change="onTableChange1"
          >
          </z-table>
        </a-tab-pane>
        <a-tab-pane key="4" tab="通联记录">
          <z-table
            ref="table"
            rowKey="id"
            size="middle"
            :showAlert="false"
            :showSelection="false"
            :loading="loading_tl"
            :columns="columns_tl"
            :dataSource="pageData_tl"
            @change="onTableChange_tl"
          />
        </a-tab-pane>
        <a-tab-pane key="5" tab="通联关系图">
          <relation-graph ref="relationRef" :phone="infoObj.phone" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="职住区域" force-render>
            <a-radio-group default-value="1" @change="onPosition" style="margin-bottom:20px;">
              <a-radio-button value="1"> 居住地 </a-radio-button>
              <a-radio-button value="2"> 工作地 </a-radio-button>
            </a-radio-group>
            <z-table
              ref="table"
              rowKey="id"
              :showAlert="false"
              :showSelection="false"
              :loading="loading2"
              :columns="columns2"
              :dataSource="pageData2"
              @change="onTableChange2"
            />
        </a-tab-pane>
        <a-tab-pane key="3" tab="三码互查">
          <z-table
            ref="table"
            rowKey="id"
            :showAlert="false"
            :showSelection="false"
            :loading="loading3"
            :columns="columns3"
            :dataSource="pageData3"
            @change="onTableChange3"
          />
        </a-tab-pane>
      </a-tabs>
    </div>
    <figure-portrait-three-code-modal ref="infoModalId" />
  </task-container>
</template>
<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
import taskContainer from './modules/taskContainer'
import relationGraph from './modules/echart_relation_graph2'
import figurePortraitThreeCodeModal from './modules/figurePortraitThreeCodeModal'
export default {
  components: {
    taskContainer,
    relationGraph,
    figurePortraitThreeCodeModal,
  },
  data() {
    return {
      idDisabled: true,
      loading1: false,
      loading2: false,
      loading3: false,
      selectItem: {},
      columns1: [
        {
          title: '序号', dataIndex: 'order', scopedSlots: { customRender: 'order' }, align: 'center', width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter1.pageNo - 1) * this.pageFilter1.pageSize + (index + 1)}` //序号分页后连续
        },
        { title: '虚拟身份类型', align: 'center', dataIndex: 'type' },
        { title: '账号ID', align: 'center', dataIndex: 'account' }
      ],
      pageData1: {},
      pageFilter1: {
        pageNo: 1,
        pageSize: 10
      },
      columns2: [
        {
          title: '序号', dataIndex: 'order', scopedSlots: { customRender: 'order' }, align: 'center', width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter2.pageNo - 1) * this.pageFilter2.pageSize + (index + 1)}` //序号分页后连续
        },
        { title: '停留总时间', dataIndex: 'totalResidenceTime', width: 110, align: 'center' },
        { title: '位置描述', dataIndex: 'locationDescription', width: 100, align: 'center', customRender: (t) => (<j-ellipsis value={t} length={20}/>) }
      ],
      pageData2: {},
      pageFilter2: {
        pageNo: 1,
        pageSize: 10,
        type: 1 //默认居住地
      },
      columns3: [
        {
          title: '序号', dataIndex: 'order', scopedSlots: { customRender: 'order' }, align: 'center', width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter3.pageNo - 1) * this.pageFilter3.pageSize + (index + 1)}` //序号分页后连续
        },
        { title: '类型', dataIndex: 'codeType', align: 'center', },
        { title: '账号', dataIndex: 'number', align: 'center' },
        {
          title: '操作', dataIndex: 'action', width: 80,
          customRender: (text, record, index) => {
            return (
              <a-button type="link" style={'padding:0'} onClick={(e) => this.handleDetails(record)}> 查看 </a-button>
            )
          }
        }
      ],
      pageData3: {},
      pageFilter3: {
        pageNo: 1,
        pageSize: 10
      },
      reloading: true,
      tabIndex: '1',
      infoObj: {},
      visible: true,
      // 通联关系
      loading_tl: false,
      columns_tl: [
        {
          title: '序号', width: 60, align: 'center', dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter_tl.pageNo - 1) * this.pageFilter_tl.pageSize + (index + 1)}` //序号分页后连续
        },
        { title: '对端号码', dataIndex: 'connectPhone', width: 80 },
        { title: '类型', dataIndex: 'contactType', width: 80 },
        { title: '通话时间', dataIndex: 'contactTime', width: 140 },
        { title: '通话时长', dataIndex: 'callTime', width: 100 }
      ],
      pageFilter_tl: {
        pageNo: 1,
        pageSize: 10
      },
      pageData_tl: {},
      isOperation: true,
      btnLoading: false,
      isTableShow: true,
      isCloseShow: true,
      isHandleShow: false,
      updateParam: {}
    }
  },
  methods: {
    // 点击目标人员
    onSelectItem(item) {
      console.log(item)
      this.tabIndex = '1'
      this.selectItem = item
      this.infoObj = Object.assign({}, this.selectItem, item)
      // this.getInfo(item.phoneNumber)
      // this.$set(this.pageFilter1, 'phone', item.phone)
      // this.pageFilter2.phone = item.phoneNumber
      // this.pageFilter3.phone = item.phoneNumber
      // this.pageFilter1.taskId = this.$route.query.taskId
      // this.pageFilter2.taskId = this.$route.query.taskId
      // this.pageFilter3.taskId = this.$route.query.taskId
      // //重点人
      // if (this.tenantid == 3) {
      //   this.pageFilter_tl.phone = item.phoneNumber
      //   this.pageFilter_tl.taskId = this.$route.query.taskId
      // }
      this.refreshTable1()
    },
    onSetQuery(query) {
      this.updateParam = {
        taskId: query.taskId,
        approvalId: query.approvalId
      }
      // this.pageFilter1.taskId = query.taskId
      // this.pageFilter2.taskId = query.taskId
      // this.pageFilter3.taskId = query.taskId
      // this.pageFilter1.approvalId = query.approvalId
      // this.pageFilter2.approvalId = query.approvalId
      // this.pageFilter3.approvalId = query.approvalId
      // let str = query.isOperation.toString()
      // if (str == 'true') {
      //   this.isOperation = true //发起人
      // } else {
      //   this.isOperation = false //审批人
      // }
    },
    handleChange(val) {
      this.tabIndex = val
      if (val == 1) this.refreshTable1() // 虚拟身份
      if (val == 2) this.refreshTable2() // 职住区域
      if (val == 3) this.refreshTable3() // 三码互查
      if (val == 4) this.refreshTable_tl() // 通联记录
    },
    refreshTable1() {
      this.loading1 = true
      let form = Object.assign({}, {phone: this.infoObj.phone, taskId: this.infoObj.taskId}, this.pageFilter1)
      alarmServiceApi
        .getPortraitVirtualIdentity(form)
        .then(res => {
          if (res.success) {
            this.pageData1 = res.result
            this.loading1 = false
            this.idDisabled = false
          } else {
            this.$message.warning(res.message)
            this.loading1 = false
          }
        })
        .catch(e => {
          this.loading1 = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable2() {
      this.loading2 = true
      // 	1-居住地 2-工作地
      let form = Object.assign({}, {type: 1, phone: this.infoObj.phone, taskId: this.infoObj.taskId}, this.pageFilter2)
      alarmServiceApi
        .getPortraitWorkingLivingArea(form)
        .then(res => {
          this.loading2 = false
          if (res.success) {
            this.pageData2 = res.result
            this.idDisabled = false
            // this.$refs.table.onClearRowKeys()
            // this.$refs.mapDrawId.removeOverlay()
          } else {
            this.$message.warning(res.message)
            
          }
        })
        .catch(e => {
          this.loading2 = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable3() {
      this.loading3 = true
      let form = Object.assign({}, {phone: this.infoObj.phone, taskId: this.infoObj.taskId}, this.pageFilter3)
      alarmServiceApi
        .getPortraitThreeCodeMutualCheck(form)
        .then(res => {
          this.loading3 = false
          if (res.success) {
            this.pageData3 = res.result
            this.idDisabled = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.loading3 = false
          this.$message.warn('请求失败！')
        })
    },
    refreshTable_tl() {
      this.loading_tl = true
      let form = Object.assign({}, {phone: this.infoObj.phone, taskId: this.infoObj.taskId}, this.pageFilter_tl)
      alarmServiceApi
        .getPortraitCommonRecord(form)
        .then(res => {
          this.loading_tl = false
          if (res.success) {
            this.pageData_tl = res.result
            this.idDisabled = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.loading_tl = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange1(pagination, pageFilter, sorter) {
      this.pageFilter1 = Object.assign({}, this.pageFilter1, pagination)
      this.refreshTable1()
    },
    onTableChange2(pagination, pageFilter, sorter) {
      this.pageFilter2 = Object.assign({}, this.pageFilter2, pagination)
      this.refreshTable2()
    },
    onTableChange3(pagination, pageFilter, sorter) {
      this.pageFilter3 = Object.assign({}, this.pageFilter3, pagination)
      this.refreshTable3()
    },
    onTableChange_tl(pagination, pageFilter, sorter) {
      this.pageFilter_tl = Object.assign({}, this.pageFilter_tl, pagination)
      this.refreshTable_tl()
    },
    handleDetails(record) {
      let str = record.codeType
      this.$refs.infoModalId.show(str + '：' + record.number, record.phoneList)
    },
    onPosition(val) {
      console.log(val.target.value)
      if (val.target.value == 1) {
        //居住地
        this.pageFilter2.type = 1
      } else {
        //工作地
        this.pageFilter2.type = 2
      }
      this.refreshTable2()
    },
    update1() {
      let param = Object.assign(this.updateParam, { phone: this.pageFilter1.phone })
      api
        .updateVirutalIdentity(param)
        .then(res => {
          if (res.success) {
            this.$message.success('更新成功！')
            this.refreshTable1()
          } else {
            this.$message.error('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.error('更新失败！')
        })
    },
    update2() {
      let param = Object.assign(this.updateParam, { phone: this.pageFilter2.phone, type: this.pageFilter2.type })
      api
        .updateActiveAreaInfo(param)
        .then(res => {
          if (res.success) {
            this.$message.success('更新成功！')
            this.refreshTable2()
          } else {
            this.$message.error('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.error('更新失败！')
        })
    },
    update3() {
      let param = Object.assign(this.updateParam, { phone: this.pageFilter3.phone })
      api
        .updateThreeCode(param)
        .then(res => {
          if (res.success) {
            this.$message.success('更新成功！')
            this.refreshTable3()
          } else {
            this.$message.error('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.error('更新失败！')
        })
    },
    update_tl() {
      let param = Object.assign(this.updateParam, { msisdn: this.pageFilter_tl.phone })
      api
        .updateContactRecord(param)
        .then(res => {
          if (res.success) {
            this.$message.warning('更新成功！')
            this.refreshTable_tl()
          } else {
            this.$message.warn('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.warn('更新失败！')
        })
    },
    update_gx() {
      let param = Object.assign(this.updateParam, { msisdn: this.pageFilter_tl.phone })
      api
        .updateContactRelation(param)
        .then(res => {
          if (res.success) {
            this.$nextTick(() => {
              this.$message.warning('更新成功！')
              this.$refs.relationRef.getList()
            })
          } else {
            this.$message.warn('更新失败！')
          }
          this.btnLoading = false
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.warn('更新失败！')
        })
    },
    onUpdate() {
      this.btnLoading = true
      if (this.tabIndex == 1) {
        this.update1()
      }
      if (this.tabIndex == 2) {
        this.update2()
      }
      if (this.tabIndex == 3) {
        this.update3()
      }
      if (this.tabIndex == 4) {
        this.update_tl()
      }
      if (this.tabIndex == 5) {
        this.update_gx()
      }
    },
    clickLeft() {
      // if (this.isDetailClose) {
      //   this.isTableShow = true
      // } else {
      this.isTableShow = true
      this.isCloseShow = true
      this.isHandleShow = false
      // }
    },
    onCloseTable() {
      this.isCloseShow = false
      this.isTableShow = false
      this.isHandleShow = true
    },
    onLocal(record) {
      // console.log('record')
      // console.log(record.lat, record.lng)
      let arr1 = []
      // let str1 = ''
      // let str2 = ''
      // if (record.placeName.length > 10) {
      //   str1 = record.placeName.substring(0, 10)
      //   str2 = record.placeName.substring(10, record.placeName.length)
      // }
      arr1.push({
        key: 0,
        // position: str1 + '\r\n' + str2,
        position: record.placeName,
        longitude: record.lng,
        latitude: record.lat
      })
      // console.log(arr1)
      let arr = [
        {
          list: arr1
        }
      ]
      // 绘制轨迹
      this.$refs.mapDrawId.drawTaskDetailsDrawer(arr)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.menuBox {
  height: auto;
}
.personal-details {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  .icon {
    flex: 1;
    .anticon {
      font-size: 80px;
    }
  }
  .info {
    flex: 4;
    .info-flex {
      display: flex;
      justify-content: space-between;
      > * {
        flex: 1;
      }
    }
  }
}
.closeTable {
  position: absolute;
  left: 313px;
  top: 54px;
  z-index: 100;
  cursor: pointer;
}
.handle {
  position: absolute;
  display: inline-block;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.leftHandle {
    left: 0;
  }
  &.rightHandle {
    right: 0;
  }
}
</style>
